<template>
  <div class="addMonthView">
    <div
      class="divFlex"
      style="justify-content: space-between; margin-bottom: 10px"
    >
      <div class="divFlex">
        <div style="margin-right: 20px">强戒出所预警 (15天)</div>
        <el-tooltip
          class="item"
          effect="dark"
          content="根据强戒人员入所时间判断，满两年提前15天进行预警"
          placement="right-start"
        >
          <i class="el-icon-warning" />
        </el-tooltip>
      </div>
      <div class="detailTitle" @click="openModal">详情</div>
    </div>
    <div style="font-size: 24px; height: 24px" />
    <!-- echart -->
    <div ref="echartAddMonth" class="echartView" />
    <ModalView ref="modalRef" />
  </div>
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../mixins/resize";
import ModalView from "./modal.vue";
import { getXzrs, getStatistics } from "@/api/earlyWarning/qjcs";
export default {
  components: {
    ModalView,
  },
  mixins: [resize],
  data() {
    return {
      chart: null,
      total: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
    // this.getRs();
    this.getEchart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    getRs() {
      getXzrs().then((response) => {
        this.total = response.data;
      });
    },
    getEchart() {
      getStatistics().then((response) => {
        this.$nextTick(() => {
          const x = [];
          const y = [];
          for (let i = 0; i < response.data.length; i++) {
            const item = response.data[i];
            x.push(item.day);
            y.push(item.num);
          }
          this.initChart(x, y);
        });
      });
    },
    openModal() {
      this.$refs["modalRef"].openModal();
    },
    initChart(x, y) {
      this.chart = echarts.init(this.$refs.echartAddMonth, "addMonth");
      this.chart.setOption({
        grid: {
          top: 2,
          left: 0,
          right: "30px",
          bottom: 0,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: x || [],
          axisLine: {
            lineStyle: {
              color: "rgb(124, 183, 244)",
            },
          },
          axisTick: {
            show: false,
          },
          boundaryGap: false,
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            type: "line",
            data: y || [],
            color: "rgb(124, 183, 244)",
            lineStyle: {
              normal: {
                width: 5,
                color: "rgb(124, 183, 244)",
                shadowColor: "rgba(124, 183, 244)",
                shadowBlur: 10,
                shadowOffsetY: 7,
              },
            },
            itemStyle: {
              normal: {
                color: "rgb(124, 183, 244)",
                borderWidth: 10,
                borderColor: "rgb(124, 183, 244)",
              },
            },
            smooth: true,
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.addMonthView {
  width: 100%;
  height: calc((100vh - 240px) / 4);
  background: #fff;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 10px;
  box-shadow: 0px 0px 6px #ccc;
}
.divFlex {
  display: flex;
  align-items: center;
}
.detailTitle {
  font-size: 14px;
  color: rgb(124, 183, 244);
  cursor: pointer;
}
.echartView {
  width: 100%;
  height: calc(((100vh - 240px) / 4) - 80px);
  box-sizing: border-box;
  padding: 0;
}
</style>
